import { useDark, useMediaQuery, useStorage, useToggle, useBrowserLocation } from '@vueuse/core';
import { useRoute } from 'vue-router';
import { defineStore } from 'pinia';
import { type Ref, watch, ref } from 'vue';


export const useStyleStore = defineStore('style', {
  state: () => {
    const isDarkTheme = ref(false) || useDark();
    const toggleDark = useToggle(isDarkTheme);
    const location = useBrowserLocation()
    const isSmallScreen = useMediaQuery('(max-width: 700px)');
    const isMenuCollapsed = useStorage('isMenuCollapsed', isSmallScreen.value) as Ref<boolean>;
    watch(isSmallScreen, v => (isMenuCollapsed.value = v));

    const isChat = location.value.search.indexOf('chat=1') > -1;
    isMenuCollapsed.value = isChat;

    return {
      isDarkTheme,
      toggleDark,
      isMenuCollapsed,
      isSmallScreen,
      isChat,
    };
  },
});
